 <!-- 直播详情 -->
<template>
  <div id="liveVideoDetail">
    <el-tabs v-model="activeTab" >
    <el-tab-pane label="直播详情" name="0">
    <el-form :model="liveVideoForm" :rules="rules" ref="liveVideoForm" :inline="true" label-position="info_style"  label-width="150px">
    <div class="info">直播内容</div>
    <div class="info_style">
        <el-form-item label="直播标题" prop="title">
        <el-input v-model="liveVideoForm.title"  placeholder="请输入" style="width:260px" disabled></el-input>
        </el-form-item>
        <el-form-item label="视频房间号" prop="roomNo">
        <el-input v-model="liveVideoForm.roomNo"  placeholder="请输入" style="width:260px" disabled></el-input>
        </el-form-item>
         <!-- <el-form-item label="频道类型" prop="channelType">
           <el-select v-model="liveVideoForm.channelType" placeholder="请选择直播类型" style="width:260px" disabled>
              <el-option v-for="item in channelTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="直播类型" prop="type">
        <el-select v-model="liveVideoForm.type" placeholder="请选择直播类型" style="width:260px" disabled>
          <el-option v-for="item in liveTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="直播分类" prop="categoryName">
          <el-input v-model="liveVideoForm.categoryName" placeholder="请选择直播分类" style="width:260px" disabled>
        </el-input>
        </el-form-item>
        <el-form-item label="直播时间" prop="liveTime">
           <el-date-picker v-model="liveVideoForm.liveTime" style="width:260px" disabled type="date" format="yyyy-MM-dd"
             placeholder="请选择" :maxlength="30" >
           </el-date-picker>
        </el-form-item>
        <el-form-item label="主播" prop="anchorName">
         <el-input v-model="liveVideoForm.anchorName" placeholder="请选择主播" style="width:260px" disabled>
        </el-input>
        </el-form-item>
        <el-form-item label="提问次数限制" prop="questionLimit">
          <el-select v-model="liveVideoForm.questionLimit" placeholder="请选择提问次数限制" style="width:260px" disabled>
          <el-option v-for="item in questionLimitList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item v-if="liveVideoForm.questionLimit == 0" label="提问次数">
           <el-input style="width:260px" disabled></el-input>
        </el-form-item>
        <el-form-item v-else label="提问次数" prop="questionCount">
           <el-input v-model="liveVideoForm.questionCount" style="width:260px" disabled></el-input>
        </el-form-item>
        <el-form-item label="直播简介" prop="liveInfo">
        <el-input type="textarea" v-model="liveVideoForm.liveInfo" style="width:690px" disabled></el-input>
        </el-form-item>
        <el-form-item label="直播主图" ref= "ElUpload" required >              
          <el-upload ref="upload" disabled
            :action="uploadImg"
            accept="image/*"
            name="file"
            list-type="picture-card" 
            :limit="1"
            :on-exceed="onExceed"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :show-file-list="false">
            <img v-if="liveVideoForm.liveCenterImg" :src="liveVideoForm.liveCenterImg" style="width:147px;height:98px;margin-top:10px">
            <i class="el-icon-plus"></i>
            <span slot="tip" class="el-upload__tip" style="margin-left:40px;">请上传PNG,JPG等格式的图片，比例为16:9</span>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
    
    <div class="info">关联直播</div>
    <div class="info_style">
    <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
        <el-table ref="ruleTable" :data="videoRelateDetailList" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="直播排序">
            <template slot-scope="scope">
            <el-tooltip  effect="dark"  placement="top">
                <div slot="content">直播排序</div>
                <el-input v-model="scope.row.relateVideoSort" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>
            </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="直播编号">
            <template slot-scope="scope"> 
            <el-tooltip effect="dark" placement="top">
                <div slot="content">直播编号</div> 
                <el-input v-model="scope.row.relateVideoNo" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>
            </el-tooltip>
            </template>
        </el-table-column>
            </el-table>
          </el-row>
     </el-form>
     </div>

    <div class="info">直播服务器</div>
    <div class="info_style">
    <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
        <el-table ref="ruleTable" :data="videoServerDetailList" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="是否主服务器">
            <template slot-scope="scope">
            <el-tooltip  effect="dark" placement="top">
                <div slot="content">是否主服务器</div>
                 <el-select v-model="scope.row.isMasterServer" size="mini" :maxlength="30" placeholder="请选择直播类型" disabled>
                  <el-option v-for="item in isMasterServerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="播放地址">
            <template slot-scope="scope">
            <el-tooltip  effect="dark" placement="top">
                <div slot="content">播放地址</div>
                <el-input v-model="scope.row.liveServer" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>
                <!-- <el-select v-model="scope.row.liveServer" size="mini" :maxlength="30" placeholder="请选择直播类型" disabled>
                  <el-option v-for="item in liveServerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select> -->
            </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="串流密钥">
            <template slot-scope="scope"> 
            <el-tooltip effect="dark" placement="top">
                <div slot="content">串流密钥</div> 
                <el-input v-model="scope.row.liveServerSecret" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>
            </el-tooltip>
            </template>
        </el-table-column>
        </el-table>
        </el-row>
     </el-form>
     </div>
    <div class="info">HLS配置</div>
    <div class="info_style">
    <el-form :inline="true" label-width="40px" :stripe="false">
        <el-row>
        <el-table ref="ruleTable" :data="videoHlsDetailList" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="是否预告">
            <template slot-scope="scope">
            <el-tooltip  effect="dark" placement="top">
                <div slot="content">是否预告</div>
                 <el-select v-model="scope.row.isAdvance" size="mini" placeholder="请选择是否预告" disabled>
                  <el-option v-for="item in isAdvanceServerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="码率类型">
            <template slot-scope="scope">
            <el-tooltip  effect="dark"  placement="top">
                <div slot="content">码率类型</div>
                <el-input v-model="scope.row.liveHlsType" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>
            </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="地址">
            <template slot-scope="scope"> 
            <el-tooltip effect="dark" placement="top">
                <div slot="content">地址</div> 
                 <el-input v-model="scope.row.liveHlsAddress" size="mini" :maxlength="30"  placeholder="请输入" disabled></el-input>>
            </el-tooltip>
            </template>
        </el-table-column>
        </el-table>
        </el-row>
      </el-form>
      </div>
       <div style="float:right;">
       <el-button type="primary" @click="back">返回</el-button>
    </div>
    </el-tab-pane>
    <el-tab-pane label="数据统计" name="1">
        <el-form :model="LiveVideoData" :rules="rules" ref="LiveVideoData" :inline="true" label-position="info_style"  label-width="150px">
            <div class="info_style">
                <el-form-item label="在线观看人数">
                <el-input v-model="LiveVideoData.onLineNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="峰值观看人数">
                <el-input v-model="LiveVideoData.topLineNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="观看次数">
                <el-input v-model="LiveVideoData.watchNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="聊天人数">
                <el-input v-model="LiveVideoData.chatPersonNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="聊天次数">
                <el-input v-model="LiveVideoData.chatCountNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="提问人数">
                <el-input v-model="LiveVideoData.questionPersonNum" style="width:260px" disabled></el-input>
                </el-form-item>
                <el-form-item label="提问次数">
                <el-input v-model="LiveVideoData.questionCountNum" style="width:260px" disabled></el-input>
                </el-form-item>
            </div>
        </el-form>
    </el-tab-pane>
    <el-tab-pane label="生命周期" name="2">
      <div class="operateLog" style="margin-left:20px">
        <div v-for="(activity, index) in operateLogList" :key="index">
            <div v-if="index == 0">
            <div class="title_top"> 
                <div class="title_img_outside">
                <img class="title_img_inside" src="./../../assets/logTitleInside.png">
                </div>
                <div class="title_date" > {{activity.createTimeShort}}</div>
            </div>
            <el-card>
                <div class="content">
                <img  class="content_img" src="./../../assets/logContentFlag.png"/>
                <span class="content_basic_info">{{activity.createTimeMoreShort}} : {{activity.createUserName}}-{{activity.createUserCode}}</span>
                </div>
                <div class="content_operate">{{activity.content}}</div>
            </el-card>
            </div>
            <div v-else>
            <div v-if="operateLogList[index].createTimeShort != operateLogList[index-1].createTimeShort">
                <div class="title_top"> 
                <div class="title_img_outside">
                    <img  class="title_img_inside" src="./../../assets/logTitleInside.png">
                </div>
                <div class="title_date" > {{activity.createTimeShort}}</div>
                </div>
            </div>
            <el-card>
                <div class="content">
                <img  class="content_img" src="./../../assets/logContentFlag.png"/>
                <span class="content_basic_info"> {{activity.createTimeMoreShort}} : {{activity.createUserName}}-{{activity.createUserCode}}</span>
                </div>
                <div class="content_operate">{{activity.content}}</div>
            </el-card>
            </div>
        </div>
       </div>
    </el-tab-pane>
    </el-tabs>
    </div>
</template>

<script>
import { liveVideoAPI, liveBasicAPI, commonAPI } from "@/api/index";
export default {
  data() {
    return {
      loginUser: {
        uid: this.$root.uid,
        title: this.$root.title,
        email: this.$root.email
      },
      liveVideoForm: {
        title: "",//直播标题
        type: "",//直播类型
        roomNo: "",//房间号
        channelType: "",//频道类型
        categoryId: "",//直播分类
        liveTime: "",//直播时间
        anchorId: "",//主播id
        questionLimit: "",//提问次数限制
        questionCount: "",//提问次数
        liveInfo: "",//直播简介
        liveCenterImg:'',//直播主图
        liveStatus: "",//直播状态
      },
      
      videoRelateDetailList: [],
      videoServerDetailList: [],
      videoHlsDetailList: [],
      uploadImg:'/live/common/uploadAttachment',
      liveTypeList: [
      {
        value: 0,
        label: "预告"
      },
      {
        value: 1,
        label: "回看"
      }],
      channelTypeList: [
      {
        value: 0,
        label: "直播"
      },
      {
        value: 1,
        label: "回看"
      }],
      questionLimitList: [
      {
        value: 0,
        label: "不限制"
      },
      {
        value: 1,
        label: "限制"
      }],
      isMasterServerList: [
      {
        value: 0,
        label: "否"
      },
      {
        value: 1,
        label: "是"
      }],
      isAdvanceServerList: [
      {
        value: 0,
        label: "否"
      },
      {
        value: 1,
        label: "是"
      }],
      liveServerList: [
      {
        value: 0,
        label: "live"
      },
      {
        value: 1,
        label: "live2"
      }],
      rules: {
        title: [{ required: true, message: "直播标题不能为空" }],
        type: [{ required: true, message: "直播类型不能为空" }],
        roomNo: [{ required: true, message: "房间号不能为空" }],
        channelType: [{ required: true, message: "频道类型不能为空" }],
        categoryId: [{ required: true, message: "直播分类不能为空" }],
        liveTime: [{ required: true, message: "直播时间不能为空" }],
        anchorId: [{ required: true, message: "主播不能为空" }],
        questionLimit: [{ required: true, message: "提问次数限制不能为空" }],
        questionCount: [{ required: true, message: "提问次数不能为空" }],
        liveInfo: [{ required: true, message: "直播简介不能为空" }],
      },
      loading: false,
      isDisable: false,
      activeTab: "0",
      LiveVideoData: {
        onLineNum: "",//在线观看人数
        topLineNum: "",//峰值人数
        watchNum: "",//观看次数
        chatPersonNum: "",//聊天人数
        chatCountNum: "",//聊天次数
        questionPersonNum: "",//提问人数
        questionCountNum: "",//提问次数
      },
    };
  },
  created: function() {
    //根据id，获取直播详情
    this.getLiveVideoDto();
    //获取统计数据
    this.getLiveVideoData();
    //获取操作日志
    this.getOperateLogList();
  },
  computed: {
    uploadDisabled:function() {
      return this.liveVideoForm.liveCenterImg.length >0;
    },
  },
  methods: {
     //根据id，获取直播详情
     getLiveVideoDto() {
       let param = {
         id: this.$route.query.id
       }
       liveVideoAPI.getLiveVideoDto(param, res => {
        if (res) {
           this.liveVideoForm = res;
           this.videoRelateDetailList = res.videoRelateDetailList;
           this.videoServerDetailList = res.videoServerDetailList;
           this.videoHlsDetailList = res.videoHlsDetailList;
        }
      })
     },
     //获取统计数据
     getLiveVideoData() {
       let param = {
         liveNo: this.$route.query.liveNo
       }
       liveVideoAPI.getLiveVideoData(param, res => {
        if (res) {
           this.LiveVideoData = res;
        }
      })
     },
     //获取生命周期
    getOperateLogList() {
      let param = {
       billNo: this.$route.query.liveNo
      }
      commonAPI.getOperateLogList(param, res => {
        if (res) {
           this.operateLogList = res;
           this.operateLogList.forEach(item => {
            //日期转为yyyy-mm-dd
            item.createTimeShort = dateFormatShort(item.createTime);
            //日期转为yyyy-MM-dd hh:mm:ss
            let createTimeLong = dateFormatLong(item.createTime);
            //日期截为hh:mm:ss
            item.createTimeMoreShort = createTimeLong.substring(createTimeLong.length - 8);
          });
        }
      });
     },
    //返回
    back() {
      this.$router.push({ path: "/liveVideoList" });
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    messageWarn(message) {
      this.$message({ showClose: true, type: "warning", message: message });
    },
    messageSuccess(message) {
      this.$message({ showClose: true, type: "success", message: message });
    },
    messageError(message) {
      this.$message({ showClose: true, type: "error", message: message });
    },
    messageInfo(message) {
      this.$message({ showClose: true, type: "info", message: message });
    },
    /**日期转换 */
    dateFormat: function(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return formatDate(date);
    },
  },
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mL57 {
  margin-left: 57px !important;
}
.title {
    font-size:14px;
    color:#666;
}
.line {
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(231, 228, 235);
}
.info {
    margin-top:30px;
    font-size:20px;
    text-align: center;
}
.info_style {
    margin-top: 20px;
}

.operateLog {
  margin-left:20px
}
 .title_top{
   background: url(./../../assets/logTitleOutside.png) no-repeat 0px;
   color: rgb(255, 255, 255);
 }
.title_img_outside{
  display: inline;
}
.title_img_inside{
    margin-top: 5px;
    width: 30px;
    height: 30px;
}
.title_date{
  position: absolute;
  padding-top: 10px;
  display: inline;
}
.content{
  height: 20px;
}
.content_operate{
  margin-left: 50px;
  margin-top: 5px;
}
.content_img{
  width: 20px;
  height: 20px;
}
.content_basic_info{
  position: absolute;
}
</style>
